<template>
	<view class="wrapper">
		<view id="shoppingHead" class="header padding flex justify-between align-center" :class="isCeiling?'ceiling-white':''">
			<view>
				<view>三木木手作办公室</view>
				<view class="text-xs text-gray flex">
					<view>共有{{cartList.length}}件商品</view>
					<view class="text-cut margin-left-sm">收货地址：湖北武汉武昌区绿地国际金融城绿地蓝海A座1701</view>
				</view>
			</view>
			<view @click="isEdit=!isEdit">编辑</view>
		</view>
		<view class="list">
			<uni-swipe-action>
			    <uni-swipe-action-item :autoClose="true" :options="options" @click="onClick($event,index)" :data-index="index" v-for="(item,index) in cartList" :key="index">
			        <view class='cont flex padding-sm align-center solids-bottom'>
						<view class="margin-right-xs"><radio :checked="item.checked" @click="check('item',index)" /></view>
						<view class="flex">
							<view class="margin-right-xs">
								<image class="radius" :src="item.imgsrc" 
								lazy-load 
								@load="onImageLoad('cartList', index)"
								@error="onImageError('cartList', index)"></image>
							</view>
							<view class="info flex flex-direction justify-between">
								<view>
									<view class="title text-bold">
										<text v-if="index%2==0" class="cu-tag line-red margin-right-xs">包邮</text>
										<text class="">香薰蜡烛石膏专用精油精油室内香薰房间香水薰衣草玫瑰精油香薰</text>
									</view>
									<view class="subType text-gray">型号：蜡烛专用60ml 薰衣草</view>
								</view>
								<view class="flex justify-between align-center">
									<view class="text-red text-price">{{item.price}}</view>
									<yp-number-box @change="numberChange" :value="item.number" :index="item.id" :min="1" :max="99" />
								</view>
							</view>
						</view>
					</view>
			    </uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		
		
		<view class="bottomBtns flex justify-between align-center bg-white solids-top">
			<view v-if="!isEdit" class="margin-sm"><label class="radio" @click="check('all')"><radio value="all" :checked="isCheckedAll" class="margin-right-sm"/>全选</label></view>
			<view v-if="!isEdit" class="flex align-center">
				<view>合计<text class="text-price text-red margin-lr-sm">{{showAllPrice}}</text></view>
				<view :class="allPrice>0?'bg-red':'bg-gray'" class="submit" @click="createOrder">结算</view>
			</view>
			<view v-if="isEdit" class="submit bg-red">删除全部</view>
		</view>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
	import ypNumberBox  from '@/components/yp-number-box/yp-number-box.vue';
	import floatTool from "@/js/floatTool.js";
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem,
			ypNumberBox
		},
		data(){
			return {
				isCeiling:false,
				searchBoxScroll:0,
				isEdit:false,
				options:[
					  {
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				cartList:[],
				checkedList:[],
				isCheckedAll:false,
				allPrice:0
			}
		},
		computed:{
			showAllPrice:function(){
				return this.$service.formatNumber2(this.allPrice,',',2);
			}
		},
		watch:{
			
		},
		methods:{
			onClick(e,index){
				console.log('当前点击的是第'+e.index+'个按钮，点击内容是'+e.content.text+",列表index:"+index);
				this.deleteCartItem(index);
			},
			//请求数据
			async loadData(){
				let list = [
					{id:1,name:"",type:"",price:70.8,number:1,imgsrc:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=663305452,3399366098&fm=26&gp=0.jpg"},
					{id:2,name:"",type:"",price:73.8,number:6,imgsrc:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=346602316,2196179934&fm=26&gp=0.jpg"},
					{id:3,name:"",type:"",price:76.3,number:1,imgsrc:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3051321824,3703227504&fm=26&gp=0.jpg"},
					{id:4,name:"",type:"",price:70.8,number:3,imgsrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592549058290&di=7074b5a83406a1d1abcdc9fb3059e1f1&imgtype=0&src=http%3A%2F%2Fwww.lyh8.cn%2Fupload%2Fnews%2F2012-5-21%2F2012521200135b5yz.jpg"},
					{id:5,name:"",type:"",price:70.2,number:1,imgsrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592549057259&di=cd070fb489eecd0017b2b062f6f7fafa&imgtype=0&src=http%3A%2F%2Fimage5.suning.cn%2Fuimg%2Fb2c%2Fnewcatentries%2F0070145206-000000000184368513_5_800x800.jpg"},
					{id:6,name:"",type:"",price:70.8,number:1,imgsrc:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2866998911,2419028599&fm=26&gp=0.jpg"},
					{id:7,name:"",type:"",price:70.7,number:2,imgsrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592549121412&di=95f18ff4c334ac1d4dd6525acc904f49&imgtype=0&src=http%3A%2F%2Fimg.xiugei.com%2Fviewinfo%2Finfoimgsps%2Fltzt%2Fcontent1414205464154.png"},
					{id:8,name:"",type:"",price:70.8,number:1,imgsrc:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=663305452,3399366098&fm=26&gp=0.jpg"},
					{id:9,name:"",type:"",price:70.4,number:1,imgsrc:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=663305452,3399366098&fm=26&gp=0.jpg"},
					{id:10,name:"",type:"",price:70.8,number:1,imgsrc:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=663305452,3399366098&fm=26&gp=0.jpg"}
				]; 
				let cartList = list.map(item=>{
					item.checked = false;
					return item;
				});
				this.cartList = cartList;
				this.calcTotal();  //计算总价
			},
			//监听image加载完成
			onImageLoad(key, index) {
				// this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/errorImage.jpg';
			},
			navToLogin(){
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			 //选中状态处理
			check(type, index){
				if(type === 'item'){
					this.cartList[index].checked = !this.cartList[index].checked;
				}else{
					const checked = !this.isCheckedAll
					const list = this.cartList;
					list.forEach(item=>{
						item.checked = checked;
					})
					this.isCheckedAll = checked;
				}
				this.calcTotal();
			},
			//删除
			deleteCartItem(index){
				let list = this.cartList;
				let row = list[index];
				let id = row.id;
			
				this.cartList=this.$service.removeArrByIndex(list,index, 1);
				this.calcTotal();
				uni.hideLoading();
			},
			//清空
			clearCart(){
				uni.showModal({
					content: '清空购物车？',
					success: (e)=>{
						if(e.confirm){
							this.cartList = [];
						}
					}
				})
			},
			//计算总价
			calcTotal(){
				let list = this.cartList;
				// if(list.length === 0){
				// 	this.empty = true;
				// 	return;
				// }
				let total = 0;
				let checked = true;
				list.forEach(item=>{
					if(item.checked === true){
						total=floatTool.add(total,floatTool.multiply(item.price,item.number));
					}else if(checked === true){
						checked = false;
					}
				})
				this.isCheckedAll = checked;
				this.allPrice = total;
			},
			//创建订单
			createOrder(){
				if(this.allPrice==0){
					return;
				}
				let list = this.cartList;
				let goodsData = [];
				list.forEach(item=>{
					if(item.checked){
						goodsData.push(item)
					}
				})
			
				uni.navigateTo({
					url: '/pages/order/createOrder?data='+JSON.stringify(goodsData),
					success:function(res){
						console.log('success',res)
					},
					fail:function(res){
						console.log('success',res)
					}
				})
			},
			numberChange(open){
				// console.log(open);
				var index=this.cartList.findIndex((x)=>{return x.id==open[0]});
				this.$set(this.cartList[index], `number`, open[1]);
				this.calcTotal();
			}
		},
		mounted() {
			console.log('mounted 组件挂载完毕状态===============》');
			const query = uni.createSelectorQuery().in(this);
			query.select('#shoppingHead').boundingClientRect(data => {
			console.log("得到布局位置信息" + JSON.stringify(data));
			console.log("节点离页面顶部的距离为" + data.top);
			this.searchBoxScroll = data.top
			}).exec();
		},
		onPageScroll:function(e){
			if(e.scrollTop > this.searchBoxScroll){
			this.isCeiling = true;
			}else{
			this.isCeiling = false;
			}
		},
		onShow:function(){
			this.loadData();
		}
	}
</script>

<style lang="scss">
	.wrapper{
		padding-bottom: 50px;
		.header{
				.text-cut{
					width:50vw;
				}
			}
		.list{
			padding-bottom: 50px;
			.cont{
				image{
					width:100px;
					min-width: 100px;
					height: 100px;
				}
			}
		}
		.bottomBtns{
			position: fixed;
			width:100vw;
			left: 0px;
			bottom: 0px;
			/* #ifdef H5 */
			bottom: 50px;
			/* #endif */
			.submit{
				padding: 15px 30px;
			}
		}
	}
</style>
